<template>
	<view class="index">
       <uni-nav-bar fixed="true" status-bar="true" :background-color="bgColor" color="#fff">
		   <view class="search">
			   <view class="input-box" @tap="toSearch()"><uni-icon type="search" size="20"></uni-icon> 寻找宝贝</view>
			   <navigator url="../cart/index" class="cart">
				   <view class="iconfont icon-gouwuche"></view>
			   </navigator>
			   
		   </view>	   
	   </uni-nav-bar>
	   
	   <banner :ad-list="adList" h=216.5></banner>
	   
	   <row-category :ad-list="category"></row-category>
	   
	   <scroll-goods :goods-list="hotGoods" title="热卖专区"></scroll-goods>
	   
	   <view class="action">
		   <view class="item" v-for="(item, index) in action" :key="index"   @tap="checkType(item)">
			   <image :src="item.app_image"></image>
		   </view>
	   </view>
	   
	   <goods-list :goods="recommend" title="为您推荐" showType="2"></goods-list>
	   
	   
	</view>
</template>

<script>
	import uniNavBar from '../../components/uni-nav-bar.vue';
	import uniIcon from '../../components/uni-icon.vue';
	import banner from '../../components/banner.vue';
	import Request from '../../common/request.js';
	import rowCategory from '../../components/row-category.vue';
	import scrollGoods from '../../components/scroll-goods.vue';
	import goodsList from '../../components/goods-list.vue';
	
	import { checkAdType } from '../../common/base.js';
	
	export default {
		components: {
			uniNavBar, uniIcon, banner, rowCategory, scrollGoods, goodsList
		},
		data() {
			return {
				bgColor: 'rgba(230,0,18, 0)',
				adList: [],
				action: [],
				category: [],
				hotGoods: [],
				recommend: []
			}
		},
		
		onLoad() {
			uni.showLoading({
				mask: true
			})
			this.getIndexData(() => {
				uni.hideLoading()
			});
		},
		
		onPullDownRefresh:function(){
			this.getIndexData(() => {
				uni.stopPullDownRefresh();
			})
		},
		methods: {
			//检查广告类型
			checkType: function(item) {
				checkAdType(item);
			},
			//获取首页接口数据
			getIndexData: function(callback){
				var that = this;
				var params = {
					url: 'index/index',
					needLogin: false,
					sCallback: function(res) {
						that.action = res.data.action;
						that.adList = res.data.banner;
						that.category = res.data.category;
						that.hotGoods = res.data.hotGoods;
						that.recommend = res.data.recommend;
						callback && callback();
					}
				}
				
				Request.send(params);
			},
			//去搜索
			toSearch() {
				uni.navigateTo({
					url: '/pages/index/search'
				});
			}
		},
		onPageScroll:function(evt){
			
			if(evt.scrollTop > 88){
				this.bgColor = 'rgba(230,0,18, 1)';
			} else {
				var opactive = parseInt(evt.scrollTop)/88;
				
				this.bgColor = 'rgba(230,0,18, '+opactive+')';
			}
		}
	}
</script>

<style>
	.index {
		text-align: center;
		width: 750upx;
	}
	
	/* 顶部搜索开始 */
		.search{	
			align-items: center;
			display: flex;
			width: 100%;
			height: 44px;
		}
		
		.uni-navbar .search view{
			height: 30px;
			line-height: 30px;
		}
		
		.search .input-box{
			background: rgba(255, 255, 255, 0.3);
			color: #fff;
			font-size: 24upx;
			flex: 1;
			border-radius: 8upx;
			flex: 1;
			text-align: center;
		}
		
		.search .cart{
			width: 100upx;
			display: flex;
			justify-content: center;
			/* align-items: center; */
		}

		.search .cart .iconfont{
			font-size: 60upx;
		}
	/* 顶部搜索结束 */


	.scroll-goods{
		margin-top: 10upx;
		
	}
	
	.scroll-goods .goods{
		text-align: left;
	}
	
	/* 活动开始 */
		.action{
			display: flex;
			width: 750upx;
			flex-wrap: wrap;
			padding: 5upx;
			box-sizing: border-box;
			background: #fff;
			margin-top: 10upx;
		}
		
		.action .item{
			width: 370upx;
			padding: 5upx;
			box-sizing: border-box;
		}
		
		.action .item image{
			width: 360upx;
			height: 254upx;
		}
	/* 活动结束 */
</style>
